<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="维护编号、房间号、负责人:">
        <el-input placeholder="请输入查询信息" v-model="keyword"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search()" v-model="fixbtn" v-if="fixshow">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      :data="pageInfo.list"
      tooltip-effect="dark"
      style="width: 930px; margin: 0px auto"
      @selection-change="handleSelectionChange"
      >
      <!-- 多选框列 
     prop:指定该列要显示的数据属性
     -->
      
      <el-table-column prop="fix_code" label="维护编号" width="120" align="center">
      </el-table-column>
      <el-table-column prop="room.room_code" label="房间号" width="120" align="center">
      </el-table-column>
      <el-table-column prop="staff.staff_name" label="负责人" width="120" align="center">
      </el-table-column>
      <el-table-column prop="fix_type" label="维护详情" width="120" align="center">
      </el-table-column>
      <el-table-column prop="fix_in_time" label="登记日期" width="150" align="center">
      </el-table-column>
      <el-table-column prop="fix_out_time" label="完成日期" width="150" align="center">
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="finishFix(scope.row)" v-if = "scope.row.fix_out_time===null"
            >完成</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 
size-change：每页显示的条目数发生变化的时候会调用的函数

current-change:当前页发生变化的时候会调用的函数
     -->
    <br /><br />
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[3, 5, 10]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>

  </div>
</template>
<script>
export default {
  data() {
    return {
      fixbtn:'34',
      fixshow:false,
      pageInfo: {},
      currentPage: 1,
      pageSize: 3,
      keyword: "",
      ids: [],
      id: "",
    };
  },
  methods: {
    loadData() {
      this.$axios
        .get("/fix", {
          params: {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            keyword: this.keyword,
          },
        })
        .then((res) => {
          this.pageInfo = res.data.data;
          setTimeout(() => {
            //设置默认选中项
            this.login();
          }, 0);
        })
        .catch((error) => {});
    },
    //val:array,代表的是选中所有行的数据
    handleSelectionChange(val) {
      var ids = []; //存放选中的id
      for (let item of val) {
        ids.push(item.fix_id);
      }
      //将选中的所有项的id放到数据模型中
      this.ids = ids;

      console.log(ids);
      //this.multipleSelection = val;
    },
    //val：每页的条目数
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.loadData();
      console.log(`每页 ${val} 条`);
    },
    //val:当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
      console.log(`当前页: ${val}`);
    },
    search() {
      this.loadData();
    },
    handleDelete(item) {
      var id = item.fix_id;
      this.$axios.delete("/fix/" + id).then((res) => {
        alert(res.data.message);
        this.loadData();
      });
      //项服务器发送请求删除就ok
    },
    finishFix(item){
      this.$axios.put("/fix/" + item.fix_id + "/" + item.room_id
      ).then(res=>{
        alert(res.data.message);
        if(item.room.room_status == 1){
          this.show = false;
        }
        this.loadData();
      }).catch(error=>{})
    },
    login(){
      var l = sessionStorage.getItem("permission_list");
      var list = l.split(',');
      list.forEach((item)=>{
        if(item == this.fixbtn){
          this.fixshow = true;
        }
      })
    }
    
  },
  mounted() {
    this.loadData();
  },
};
</script>